<template>
	<view class="createteam">
		<scroll-view lower-threshold="500" scroll-y="true":style="{height:createHeight+'px'}">
			<view class="teamScroll">
				<view class="allInp">
					<view class="allInp_item1 box d-jc-sb d-ai-c ">
						<view class="">
							团队类型
						</view>
						<view class="">
						</view>
						<view class="box d-jc-sb d-ai-c pickInp">
							<picker  @change="bindPickerChange" :value="index" :range="array" :range-key="'className'">
							     <view class="text-select">{{array[index]}}</view>
							</picker>
							<view class="iconfont iconqianjin">		
							</view>
						</view>
					</view>
					<view class="allInp_item1 box d-jc-sb d-ai-c ">
						<view class="">
							团队名称
						</view>
						<view class="">
							
						</view>
						<input type="text" v-model="parameter.name" value="" placeholder="请输入您的团队名称" />
					</view>
					
					<view class="allInp_item1 box d-jc-sb d-ai-c">
						<view class="">
							团队口令
						</view>
						<view class="">
							
						</view>
						<input type="text" v-model="parameter.password" maxlength="6" value="" placeholder="口令必须是6位数字" />
					</view>
					<view class="allInp_item box d-jc-sb d-ai-c">
						<view class="">
							招收人数
						</view>
						<view class="">
							
						</view>
						<input type="text" v-model="parameter.expectedNumber" maxlength="6" value="" placeholder="请设置进团所需要招收人数" />
					</view>
				</view>
				<view class="popbox">
					<view class="box">
						<view class="p_t" >
							团队介绍
						</view>
						<view class="">
							<textarea  class="textarea m-1" placeholder="请输入您的团队简介(内容长度不超过200个字符)" v-model="parameter.introduce" :maxlength="200" auto-height />
							
						</view>
					</view>
					<view class="box photo">
						<view class="p_t" >
							团队照片
						</view>
						<view class="" @tap="Upload">
							<image v-if="parameter.logo===''" class="team_Img" src="../../static/images/user/tjzp@2x.png" mode=""></image>
							<image v-if="parameter.logo!==''"  class="team_Img" :src="parameter.logo" mode=""></image>
						</view>
					</view>
				</view>
				<view class="createSubmit" @tap="createSubmit">
					提交申请
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				createHeight:'',
				image:'',
				parameter:{
					name:'',
					introduce:'',
					logo:'',
					password:'',
					expectedNumber:''
				},
				array: ['文艺团队', '志愿者小组'],
				index: 0,
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'./Teamappy',
				animationDuration:300
			})
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.createHeight = res.windowHeight - uni.upx2px(0) //windoHeight为窗口高度，主要使用的是这个	
				}
			})
		
		},
		methods: {
			// 创建团队
			addTeam(){
				console.log(this.index+1)
				this.$api.addTeam({
					name:this.parameter.name,
					introduce:this.parameter.introduce,
					logo:this.parameter.logo,
					password:this.parameter.password,
					expectedNumber:this.parameter.expectedNumber,
					type:this.index+1
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res)
						uni.showToast({
							title: '申请提交成功',
							duration: 1000,
							icon: "none"
						});
						uni.navigateTo({
							url:'Teamappy'
						})
						this.parameter.name = ''
						this.parameter.introduce = ''
						this.parameter.logo = ''
						this.parameter.password = ''
						this.parameter.expectedNumber = ''
					}else if(res.data.code == 20045){
						uni.showModal({
						    title: '提示',
						    content: '前往实名认证',
						    success: function (res) {
						        if (res.confirm) {
						            uni.navigateTo({
						            	url:'../user/changeInfo'
						            })
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}else{
						uni.showToast({
							title: res.data.message,
							duration: 1000,
							icon: "none"
						});
					}
				})
			},
			bindPickerChange:function(e) {
				let that = this
			            console.log('picker发送选择改变，携带值为', e.target.value)
			            that.index = e.target.value
			        },
			//提交申请
			createSubmit(){
				if (this.parameter.name == null || this.parameter.name == '') {
					uni.showToast({
						title: '请输入团队名称',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if (this.parameter.password == null || this.parameter.password == '') {
					uni.showToast({
						title: '请输入口令',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if (!(/^\d{6}$/.test(this.parameter.password))) {
					uni.showToast({
						title: '口令填写有误',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if (this.parameter.logo == null || this.parameter.logo == '') {
					uni.showToast({
						title: '请上传团队照片',
						duration: 1000,
						icon: "none"
					});
					return
				}
				if (this.parameter.expectedNumber == null || this.parameter.expectedNumber == '') {
					uni.showToast({
						title: '请填写团队招收人数',
						duration: 1000,
						icon: "none"
					});
					return
				}
				this.addTeam()
			},
			//上传照片
			Upload() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //相册、拍摄两者都有
					success: (res)=> {
						console.log(JSON.stringify(res.tempFilePaths[0]));
						this.identify(res.tempFilePaths[0])
					}
				});
			},
			identify(filePath){
				uni.uploadFile({
					url: "https://app.xiangban365.com/app_mobile/" + "upload/file", //仅为示例，非真实的接口地址
					filePath: filePath,
					name: 'file',
					header: {
						ContentType: "image/jpg"
					},
					formData: {
						'user': 'test'
					},
					success:(uploadFileRes)=> {
						let data = JSON.parse(uploadFileRes.data)
						this.parameter.logo = data.dataMap
						console.log(this.parameter.logo)
						 
					}
				});
			},
		}
	}
</script>

<style scoped>
	.pickInp{
		width: 420rpx;
	}
	.createteam {
		width: 750rpx;
		background: #F8F8F8;
	}
	.teamScroll{
		overflow: hidden;
	}
	.allInp{
		width: 690rpx;
		height: 404rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 30rpx auto;
	}
	.allInp_item1{
		width: 630rpx;
		height: 100rpx;
		background: #FFFFFF;
		/* box-shadow: 0rpx 2rpx 0rpx 0rpx #EEEEEE; */
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		margin: 0rpx auto;
		border-bottom: 2rpx solid #EEEEEE;
	}
	.allInp_item1>view:nth-child(1){
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}
	.allInp_item1>view:nth-child(2){
		width: 4rpx;
		height: 40rpx;
		background: #CCCCCC;
		border-radius: 2rpx;
	}
	.allInp_item1>input{
		width: 420rpx;
	}
	.allInp_item{
		width: 630rpx;
		height: 100rpx;
		background: #FFFFFF;
		/* box-shadow: 0rpx 2rpx 0rpx 0rpx #EEEEEE; */
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		margin: 0rpx auto;
	}
	.allInp_item>view:nth-child(1){
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}
	.allInp_item>view:nth-child(2){
		width: 4rpx;
		height: 40rpx;
		background: #CCCCCC;
		border-radius: 2rpx;
	}
	.allInp_item>input{
		width: 420rpx;
	}
	.popbox {
		width: 690rpx;
		/* height: 490rpx; */
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 auto;
		padding-bottom: 20rpx;
	}
	.textarea {
		width: 440rpx;
		background-color: #F8F8F8;
		min-height: 200rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		padding: 25rpx 20rpx;
		margin-top: 25rpx;
		margin-left: 40rpx;
	}
	.p_t{
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		margin-left: 30rpx;
		margin-top: 25rpx;
	}
	.team_Img{
		width: 240rpx;
		height: 160rpx;
		margin-left: 40rpx;
	}
	.photo{
		margin-top: 20rpx;
	}
	.createSubmit{
		width: 600rpx;
		height: 88rpx;
		background: #FF5551;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		position: absolute;
		bottom: 60rpx;
		left: 70rpx;
	}
</style>
